<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>业务系统使用统计</title>
		<link rel="stylesheet" href="./css/common.css">
		<link rel="stylesheet" href="./css/head.css">
		<link rel="stylesheet" href="./css/index.css">
		<link rel="stylesheet" type="text/css" href="css/swiper-bundle.min.css"/>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="wrap" id="wrap">
			<!-- header start -->
			<div class="header clearfix">
				<div class="time">					
					<span id="time"></span>
				</div>
			</div>
			<!-- header end -->
			<!-- main start -->
			<div class="main clearfix w-m">
				<!-- 导航 -->				
				<div class="wrap clearfix">
					<div class="clearfix">
						<!-- 左边 -->
						<div class="leftDiv fl">
							<div class="box box1 clearfix">
								<div class="title">
									业务开通统计
								</div>
								<div class="content">
									<ul class="clearfix">
										<li class="clearfix">
											<div class="img">
												<img src="img/icon1.png" >
											</div>
											<div class="text">
												<p>127</p>
												<p>邮件系统</p>
											</div>
										</li>
										<li class="clearfix">
											<div class="img">
												<img src="img/icon2.png" >
											</div>
											<div class="text">
												<p>200</p>
												<p>查核平台</p>
											</div>
										</li>
										<li class="clearfix mt50">
											<div class="img">
												<img src="img/icon2.png" >
											</div>
											<div class="text">
												<p>320</p>
												<p>传输平台</p>
											</div>
										</li>
										<li class="clearfix mt50">
											<div class="img">
												<img src="img/icon4.png" >
											</div>
											<div class="text">
												<p>548</p>
												<p>全部</p>
											</div>
										</li>
									</ul>
								</div>
							</div>
							<div class="box box2">
								<div class="title">
									近一月业务访问统计
								</div>
								<div class="content">
									<span class="up" onclick="addIndex()">∧</span>
									<span class="down" onclick="delIndex()">∨</span>
									<div id="bar" style="width: 100%;height: 100%;"></div>
								</div>								
							</div>
							<div class="box box3">
								<div class="swiper mySwiper">
									<div class="swiper-wrapper">
										<div class="swiper-slide">
											<div class="title">
												邮件系统访问TOP 10
											</div>	
											<div class="content">
											<ul class="scroll1">
												<li class="clearfix">
													<div class="img fl">
														<img src="img/fst.png" >
													</div>
													<div class="info fl">
														<p class="clearfix txt">
															<span class="fl">北京市XXXXX公司</span>
															<span class="fr">1254622000</span>
														</p>
														<p class="track"><span class="bar"></span></p>
													</div>
												</li>
												<li class="clearfix">
													<div class="img fl">
														<img src="img/snd.png" >
													</div>
													<div class="info fl">
														<p class="clearfix txt">
															<span class="fl">北京市XXXXX公司</span>
															<span class="fr">1254622000</span>
														</p>
														<p class="track"><span class="bar"></span></p>
													</div>
												</li>
												<li class="clearfix">
													<div class="img fl">
														<img src="img/thd.png" >
													</div>
													<div class="info fl">
														<p class="clearfix txt">
															<span class="fl">北京市XXXXX公司</span>
															<span class="fr">1254622000</span>
														</p>
														<p class="track"><span class="bar"></span></p>
													</div>
												</li>
												<li class="clearfix">
													<div class="img fl">
														<p>4</p>
													</div>
													<div class="info fl">
														<p class="clearfix txt">
															<span class="fl">北京市XXXXX公司</span>
															<span class="fr">1254622000</span>
														</p>
														<p class="track"><span class="bar"></span></p>
													</div>
												</li>
												<li class="clearfix">
													<div class="img fl">
														<p>5</p>
													</div>
													<div class="info fl">
														<p class="clearfix txt">
															<span class="fl">北京市XXXXX公司</span>
															<span class="fr">1254622000</span>
														</p>
														<p class="track"><span class="bar"></span></p>
													</div>
												</li>
												<li class="clearfix">
													<div class="img fl">
														<p>6</p>
													</div>
													<div class="info fl">
														<p class="clearfix txt">
															<span class="fl">北京市XXXXX公司</span>
															<span class="fr">1254622000</span>
														</p>
														<p class="track"><span class="bar"></span></p>
													</div>
												</li>
											</ul>
										</div>											
										</div>
										<div class="swiper-slide">
											<div class="title">
												查核平台访问TOP 10
											</div>	
											<div class="content">
												<ul class="scroll1">
													<li class="clearfix">
														<div class="img fl">
															<img src="img/fst.png" >
														</div>
														<div class="info fl">
															<p class="clearfix txt">
																<span class="fl">北京市XXXXX公司</span>
																<span class="fr">1254622000</span>
															</p>
															<p class="track"><span class="bar"></span></p>
														</div>
													</li>
													<li class="clearfix">
														<div class="img fl">
															<img src="img/snd.png" >
														</div>
														<div class="info fl">
															<p class="clearfix txt">
																<span class="fl">北京市XXXXX公司</span>
																<span class="fr">1254622000</span>
															</p>
															<p class="track"><span class="bar"></span></p>
														</div>
													</li>
													<li class="clearfix">
														<div class="img fl">
															<img src="img/thd.png" >
														</div>
														<div class="info fl">
															<p class="clearfix txt">
																<span class="fl">北京市XXXXX公司</span>
																<span class="fr">1254622000</span>
															</p>
															<p class="track"><span class="bar"></span></p>
														</div>
													</li>
													<li class="clearfix">
														<div class="img fl">
															<p>4</p>
														</div>
														<div class="info fl">
															<p class="clearfix txt">
																<span class="fl">北京市XXXXX公司</span>
																<span class="fr">1254622000</span>
															</p>
															<p class="track"><span class="bar"></span></p>
														</div>
													</li>
													<li class="clearfix">
														<div class="img fl">
															<p>5</p>
														</div>
														<div class="info fl">
															<p class="clearfix txt">
																<span class="fl">北京市XXXXX公司</span>
																<span class="fr">1254622000</span>
															</p>
															<p class="track"><span class="bar"></span></p>
														</div>
													</li>
													<li class="clearfix">
														<div class="img fl">
															<p>6</p>
														</div>
														<div class="info fl">
															<p class="clearfix txt">
																<span class="fl">北京市XXXXX公司</span>
																<span class="fr">1254622000</span>
															</p>
															<p class="track"><span class="bar"></span></p>
														</div>
													</li>
												</ul>
											</div>
										</div>
										<div class="swiper-slide">
											<div class="title">
												传输平台访问TOP 10
											</div>	
											<div class="content">
												<ul class="scroll1">
													<li class="clearfix">
														<div class="img fl">
															<img src="img/fst.png" >
														</div>
														<div class="info fl">
															<p class="clearfix txt">
																<span class="fl">北京市XXXXX公司</span>
																<span class="fr">1254622000</span>
															</p>
															<p class="track"><span class="bar"></span></p>
														</div>
													</li>
													<li class="clearfix">
														<div class="img fl">
															<img src="img/snd.png" >
														</div>
														<div class="info fl">
															<p class="clearfix txt">
																<span class="fl">北京市XXXXX公司</span>
																<span class="fr">1254622000</span>
															</p>
															<p class="track"><span class="bar"></span></p>
														</div>
													</li>
													<li class="clearfix">
														<div class="img fl">
															<img src="img/thd.png" >
														</div>
														<div class="info fl">
															<p class="clearfix txt">
																<span class="fl">北京市XXXXX公司</span>
																<span class="fr">1254622000</span>
															</p>
															<p class="track"><span class="bar"></span></p>
														</div>
													</li>
													<li class="clearfix">
														<div class="img fl">
															<p>4</p>
														</div>
														<div class="info fl">
															<p class="clearfix txt">
																<span class="fl">北京市XXXXX公司</span>
																<span class="fr">1254622000</span>
															</p>
															<p class="track"><span class="bar"></span></p>
														</div>
													</li>
													<li class="clearfix">
														<div class="img fl">
															<p>5</p>
														</div>
														<div class="info fl">
															<p class="clearfix txt">
																<span class="fl">北京市XXXXX公司</span>
																<span class="fr">1254622000</span>
															</p>
															<p class="track"><span class="bar"></span></p>
														</div>
													</li>
													<li class="clearfix">
														<div class="img fl">
															<p>6</p>
														</div>
														<div class="info fl">
															<p class="clearfix txt">
																<span class="fl">北京市XXXXX公司</span>
																<span class="fr">1254622000</span>
															</p>
															<p class="track"><span class="bar"></span></p>
														</div>
													</li>
												</ul>
											</div>
										</div>
									</div>
									 <div class="swiper-pagination"></div>
								</div>
							</div>
						</div>
						<!-- 中间 -->
						<div class="centerDiv fl">
							<div class="box box1">
								<div class="content">
									<div class="zhuan"></div>
									<div id="map" style="width: 100%;height: 100%;"></div>
									<div class="list">
										<ul>
											<li class="clearfix col1">
												<span>所占</span>
												<span class="col">34 <font>%</font></span>
												<span>中管高中</span>
											</li>
											<li class="clearfix col2">
												<span>所占</span>
												<span class="col">34 <font>%</font></span>
												<span>中管金融企业</span>
											</li>
											<li class="clearfix col3">
												<span>所占</span>
												<span class="col">34 <font>%</font></span>
												<span>中管央企</span>
											</li>
											<li class="clearfix col4">
												<span>所占</span>
												<span class="col">34 <font>%</font></span>
												<span>中央机关</span>
											</li>
										</ul>
									</div>
									<div class="tan">
										<div class="inner">
											<div class="name clearfix">
												<p class="fl"><span class="city">北京市</span>业务开通列表</p>
												<p class="fr close">×</p>
											</div>
											<div class="thead">
												<span class="s1">公司</span>
												<span class="s2">邮件</span>
												<span class="s3">查核</span>
												<span class="s4">传输</span>
											</div>
											<ul class="tbody">
												<li>
													<span class="s1">北京市XXXXX公司</span>
													<span class="s2">已开通</span>
													<span class="s3">已开通</span>
													<span class="s4">已开通</span>
												</li>
												<li>
													<span class="s1">北京市XXXXX公司</span>
													<span class="s2 error">未开通</span>
													<span class="s3 error">未开通</span>
													<span class="s4 error">未开通</span>
												</li>
												<li>
													<span class="s1">北京市XXXXX公司</span>
													<span class="s2">已开通</span>
													<span class="s3">已开通</span>
													<span class="s4">已开通</span>
												</li>
												<li>
													<span class="s1">北京市XXXXX公司</span>
													<span class="s2">已开通</span>
													<span class="s3">已开通</span>
													<span class="s4">已开通</span>
												</li>
												<li>
													<span class="s1">北京市XXXXX公司</span>
													<span class="s2">已开通</span>
													<span class="s3">已开通</span>
													<span class="s4">已开通</span>
												</li>
												<li>
													<span class="s1">北京市XXXXX公司</span>
													<span class="s2">已开通</span>
													<span class="s3">已开通</span>
													<span class="s4">已开通</span>
												</li>
											</ul>
										</div>
										
									</div>
								</div>
							</div>
							<div class="box box2 clearfix">
								<div class="title1">
									今日业务系统访向趋势
								</div>
								<div id="line" style="width: 100%;height: 310px;margin-top: -30px;"></div>
							</div>
						</div>
						<!-- 右边 -->
						<div class="rightDiv fl">
							<div class="box box1">
								<div class="title">
									今日访问量
								</div>
								<div class="content">
									<ul class="clearfix">
										<li>
											<div class="top clearfix">
												<p class="fl"><img src="img/pic1.png" ></p>
												<p class="fr">邮件系统</p>
											</div>
											<div class="bot"><span>100,200</span>次</div>
										</li>
										<li class="ml22">
											<div class="top clearfix">
												<p class="fl"><img src="img/pic2.png" ></p>
												<p class="fr">查核平台</p>
											</div>
											<div class="bot"><span>103,800</span>次</div>
										</li>
										<li class="mt23">
											<div class="top clearfix">
												<p class="fl"><img src="img/pic3.png" ></p>
												<p class="fr">传输平台</p>
											</div>
											<div class="bot"><span>144,260</span>次</div>
										</li>
										<li class="ml22 mt23">
											<div class="top clearfix">
												<p class="fl"><img src="img/pic4.png" ></p>
												<p class="fr">全部业务</p>
											</div>
											<div class="bot"><span>880,560</span>次</div>
										</li>
									</ul>
								</div>
							</div>
							
							<div class="box box2">								
								<div class="title">
									近七天攻击防护统计
								</div>
								<div class="content clearfix">
									<div class="chat">
										<div class="zhuan"></div>
										<div id="pie" style="width: 100%;height: 100%;"></div>
									</div>
									<div class="txt">
										<div>
											<p class="p1">
												<span>漏洞攻击</span>
												<span>1200</span>
											</p>
										</div>
										<div>
											<p class="p2">
												<span>DOS攻击</span>
												<span>800</span>
											</p>
										</div>
										<div>
											<p class="p3">
												<span>病毒攻击</span>
												<span>4500</span>
											</p>
										</div>
									</div>
								</div>
							</div>
							<div class="box box3">
								<div class="title">
									电子政务网拓扑
								</div>
								<div class="content">
									<img src="img/pic.png" >
								</div>
							</div>
						</div>
					</div>					
				</div>				
			</div>
			<!-- main end -->
		</div>		
	</body>
</html>
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script src="js/swiper-bundle.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/data.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
	// 自动改变分辨率
	function setRem() {
	 let vW = window.innerWidth / 1920;
		let vH = window.innerHeight / 1080;
		document.getElementById('wrap').style.transform = "scale(" + vW + "," + vH + ")"
	}
	setRem();
	window.onresize = function() {
		setRem()
	};
	
	// 时钟
	formDate('time')
	
	randerMap(datas.data4,'map')
	

	
	line(datas.data3,'line')
	pie(datas.data2,'pie')
	var index=datas.data1.dataY.length-5
	bar(datas.data1,'bar',index)
	
	randerLeg(datas.data5)
	checkStatus()
	function checkStatus(){
		if(index<=0){
			$('.up').addClass('dis')
		}else{
			$('.up').removeClass('dis')
		}
		if(datas.data1.dataY.length-index<=5){
			$('.down').addClass('dis')
		}else{
			$('.down').removeClass('dis')
		}
	}
	function addIndex(){		
		if(index<=0){			
			return;
		}
		index--
		bar(datas.data1,'bar',index)
		checkStatus()
	}
	function delIndex(){		
		if(datas.data1.dataY.length-index==5){
			return;
		}
		index++
		bar(datas.data1,'bar',index)
		checkStatus()
	}
	
	
	
	var timer=setInterval(()=>{
		topScroll('.scroll',2000)
	},3000)
	$('.scroll').mouseover(function(){
		clearInterval(timer)
	}).mouseout(function(){
		timer=setInterval(()=>{
			topScroll('.scroll',2000)
		},3000)
	})
	
	var timer2=setInterval(()=>{
		topScroll('.scroll2',2000)
	},3000)
	$('.scroll2').mouseover(function(){
		clearInterval(timer2)
	}).mouseout(function(){
		timer2=setInterval(()=>{
			topScroll('.scroll2',2000)
		},3000)
	})
	var timer3=setInterval(()=>{
		topScroll('.scroll3',2000)
	},3000)
	$('.scroll3').mouseover(function(){
		clearInterval(timer3)
	}).mouseout(function(){
		timer3=setInterval(()=>{
			topScroll('.scroll3',2000)
		},3000)
	})
	
	var swiper = new Swiper(".mySwiper", {
			loop:true,
			autoplay: {
			delay: 5000,
			disableOnInteraction: false,
		  },
	      pagination: {
	        el: ".swiper-pagination",
	        dynamicBullets: true,			
	      },
	    });
</script>
